<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38"/>
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_38"/>
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38"/>
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38"/>
		
		<script src="../js/common.js?01_38" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap_body menu">
			
			<header class="bg-red9 fff f-18 pad-t-10 pad-b-10 pad-l-10 pad-r-10">
				<div class="pa back"><a href="#" onClick="back()"></a></div>
				<div class="center">规格/配菜</div>
			</header>
			
			<div class="content pad-l-10 pad-r-10 c000 pad-t-45">
				<div class="top pad-t-15 pad-b-15">
					<div class="cf">
						<div class="fl f-18">菊花水晶虾球</div>
						<div class="pr fl mag-l-5 chili_wrap">
							<img src="../images/set/chili_01.png" class="chili pa" alt="" />
							<img src="../images/set/chili_02.png" class="chili pa" alt="" />
							<img src="../images/set/chili_03.png" class="chili pa" alt="" />
						</div>
					</div>
					<p class="red9 f-13"><span>N2143</span><span class="fr f-16">￥60.00</span></p>
				</div>
				
				<div class="bottom">
					<div class="pad-t-15">
						<p class="f-15">规格选择</p>
						<ul class="cf f-13 pad-t-15 pad-b-15 center">
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>双人份</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>双人份</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>双人份</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>双人份</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							
							
						</ul>
					</div>
					
					<div class="pad-t-15">
						<p class="f-15">配菜</p>
						<ul class="cf f-13 mag-t-15 pad-b-15 center">
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>金针菇</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5 active">
								<p>豆腐丝</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>鱼丸</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>虾丸</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
						</ul>
					</div>
					
					
					<div class="pad-t-15">
						<p class="f-15">口味</p>
						<ul class="cf f-13 mag-t-15 pad-b-15 center">
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>清汤</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>微辣</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5">
								<p>红汤</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
							<li class="fl pad-t-10 pad-b-10 pr mag-b-5 active">
								<p>麻辣</p>
								<p class="f-10 center mag-t-3">22.00</p> 
								<span class="num red9 bg-fff f-12 pa">3</span>
							</li>
						</ul>
					</div>
					
					
					<div class="pad-t-20 pad-b-15">
						<div class="cf" onclick="openRemark()">
							<div class="fl">备注</div>
							<div class="fr switch">
								<div class="fl switch_open"></div>
								<div class="fr switch_close hide"></div>
							</div>
						</div>
						
						<!--备注隐藏-->
						<div class="hide">
							<div class="remark fiex pad-l-15 pad-r-15 mag-t-20 f-13">
								<input type="text" placeholder="输入备注" class="fiex1 pad-t-15 pad-b-15 pad-r-10"/>
								<span class="pen"></span>
							</div>
							<ul class="cf center f-13 mag-t-15 pad-b-15">
								<li class="fl pad-t-10 pad-b-10 mag-b-5">微辣</li>
								<li class="fl pad-t-10 pad-b-10 mag-b-5">中辣</li>
								<li class="fl pad-t-10 pad-b-10 mag-b-5">特辣</li>
								<li class="fl pad-t-10 pad-b-10 mag-b-5">变态辣</li>
								<li class="fl pad-t-10 pad-b-10 mag-b-5">金针菇</li>
								<li class="fl pad-t-10 pad-b-10 mag-b-5">金针菇</li>
								<li class="fl pad-t-10 pad-b-10 mag-b-5">金针菇</li>
								<li class="fl pad-t-10 pad-b-10 mag-b-5">金针菇</li>
								
							</ul>
						</div>
					</div>
					
					<div class="cf all bg-fff center">
						<div class="fl pad-t-15 pad-b-15 pack">
							<p><span class="bg pr mag-r-15"></span><span>整单打包</span></p>
						</div>
						<div class="fr pad-t-15 pad-b-15 wait">
							<p><span class="bg bg_02 pr mag-r-15"></span><span>整单稍后上菜</span></p>
						</div>
					</div>
				</div>
				
				
				
			</div>
			<div class="bank60"></div>
			
			<div class="pay">
				<div class="ok fiex">
					<div class="fiex8 price red9 pad-l-12 pad-t-5 bg-fff fiex">
						<div class="fiex1">
							<span>￥</span>
							<span>26.00</span>
						</div>
						<div class="cf center c000 pr f-13 number mag-r-15">
							<div class="fl circle red9 minus"></div>
							<div class="fl circle pad-l-5 pad-r-5">1</div>
							<div class="fl circle red9 add add_02"></div>
						</div>
					</div>
					
					<div class="fiex4 bg-red9 center btn pad-t-15">
						<a href="" class="fff f-15" onClick="back()">选好了</a>
					</div>
				</div>
				
			</div>
		</div>
		
		
		<!--弹窗-->
		<div class="mask bg-000 pa menu">
			<div class="pad-l-20 pad-r-20 pad-t-200">
				<div class="bg-fff wrap pr pad-t-25">
					<div class="top cf pad-l-20 pad-r-20 pad-b-40">
						<div class="fr pr">
							<span class="minus pr"></span>
							<span class="pad-l-20 pad-r-20">1</span>
							<span class="add pr"></span>
						</div>
						<div class="oh">
							<p class="f-18 c000">豆腐丝</p>
							<p class="red9 f-15 mag-t-5">12.00</p>
						</div>
					</div>
					<div class="bottom center cf">
						<div class="col-sm-6 c000 pad-t-12 pad-b-12">取消</div>
						<div class="col-sm-6 bg-red9 fff pad-t-12 pad-b-12">确定</div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
	
	<script type="text/javascript">
		//获取元素
		//开关
		var switchs = document.querySelector(".switch");
		var switch_open = document.querySelector(".switch_open");
		var switch_close = document.querySelector(".switch_close");
		
		function openRemark () {
			if (switch_open.style.display == "block") {
				switchs.style.backgroundColor == "#1a54d7";
				switch_open.style.display == "none";
				console.log(9)
			}else {
				switchs.style.backgroundColor == "#fff";
				switch_open.style.display == "block";
								console.log(1)
			}
		}
	</script>
</html>
